<template>
  <div class="task-tab">
    <section
      v-for="setting in CopiedSettings"
      :key="setting.key"
      :style="setting.type.indexOf('*') !== -1 ? { flex: 'unset', width: '100%' } : { flex: 1 }"
    >
      <!-- label -->
      <h4 :class="computeClassList(setting)">
        <span>{{ setting.label }}</span>
        <i
          v-if="
            setting.settings && setting.settings.label && setting.settings.label.type === 'icon'
          "
          :class="['iconfont', setting.settings.label.icon]"
          @click="onIconClick(setting)"
        />
      </h4>
      <!-- operation -->
      <div
        v-if="setting.type === 'input'"
        :class="['operation-container', ...computeClassList(setting)]"
      >
        <el-input
          v-model="setting.value"
          size="mini"
          placeholder="请输入"
          :disabled="setting.key === 'static' || setting.disabled || disabled"
          :max="setting.settings && setting.settings.max ? setting.settings.max : Infinity"
          @blur="onChange(setting)"
        />
      </div>
      <div
        v-else-if="setting.type === 'textarea'"
        :class="['operation-container', ...computeClassList(setting)]"
      >
        <el-input
          type="textarea"
          v-model="setting.value"
          size="mini"
          rows="1"
          resize="none"
          placeholder="请输入"
          :disabled="setting.key === 'static' || setting.disabled || disabled"
          @blur="onChange(setting)"
        />
      </div>
      <div
        v-else-if="setting.type === 'select'"
        :class="['operation-container', ...computeClassList(setting)]"
      >
        <el-select
          v-model="setting.value"
          size="mini"
          v-bind="setting.settings && setting.settings.select ? setting.settings.select : {}"
          :remote-method="query => remoteFilterOptions(query, setting)"
          :disabled="setting.key === 'static' || setting.disabled || disabled"
          @change="onChange(setting)"
        >
          <el-option
            v-for="option in setting.options?.slice(0, 200)"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </div>
      <!-- unit -->
      <div class="unit">
        <h4>{{ setting.unit }}</h4>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Emit, Watch } from 'vue-property-decorator'
import { deepClone } from '@/utils/specificFunc'
import { Dictionary, SettingType } from '@/interface/Basic'
import { SelectOptionsType } from '@/interface/ElementUI'
@Component
class TaskTab extends Vue {
  @Prop({ required: true }) settings!: SettingType[]
  @Prop({ default: false }) disabled!: boolean
  // 被标记的设置项
  /**
   * 被标记的设置项
   * {
   *    warning: ['AAF301', 'AAF401']
   * }
   * 此时 key 值存在于数组中的记录会被标记为 warning 状态
   */
  @Prop({ default: () => ({}) }) markedSettings!: Dictionary<string[]>
  CopiedSettings: SettingType[] = []
  // mounted() {
  //   this.$nextTick(() => {
  //     this.CopiedSettings = deepClone(this.settings)
  //   })
  // }
  @Watch('settings', { immediate: true })
  s_handler(newVal: SettingType[]) {
    this.CopiedSettings = deepClone(newVal)
  }
  // 将组件内绑定的值转换为 Dictionary<string> 后返回
  @Watch('CopiedSettings', { deep: true })
  @Emit('onSettingsChange')
  cs_handler(newVal: SettingType[]) {
    const obj: Dictionary<string> = {}
    newVal.forEach(setting => {
      obj[setting.key] = setting.value
    })
    return obj
  }
  computeClassList(setting: SettingType) {
    const { key, settings } = setting
    const className: string[] = []
    // 根据 key 判断是否添加 warning 等特殊标记
    Object.keys(this.markedSettings).forEach(marked_key => {
      if (this.markedSettings[marked_key].includes(key)) className.push(marked_key)
    })
    if (settings && settings.label && settings.label.type === 'icon') {
      className.push('isIcon')
    }
    return className
  }
  remoteDataset: Dictionary<SelectOptionsType<string>> = {}
  remoteFilterOptions(query: string, setting: SettingType) {
    if (setting.options === null || setting.options === undefined) return
    if (!this.remoteDataset[setting.key]) {
      this.remoteDataset[setting.key] = deepClone(setting.options)
    }
    setting.options = this.remoteDataset[setting.key].filter(
      item => item.label.indexOf(query) !== -1
    )
  }
  // 数据变化时，返回变化的配置项以及完整数据
  @Emit('change')
  onChange(setting: SettingType) {
    return {
      item: setting,
      dict: this.captureSettings()
    }
  }
  @Emit('onIconClick')
  onIconClick(setting: SettingType) {
    return setting
  }
  captureSettings() {
    const obj: Dictionary<string> = {}
    this.CopiedSettings.forEach(setting => {
      obj[setting.key] = setting.value
    })
    return obj
  }
}
export default TaskTab
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
.task-tab {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  section {
    flex: 1;
    min-width: 250px;
    margin-right: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h4 {
      min-width: 85px;
      margin-right: 5px;
      font-size: 12px;
      font-weight: 400;
      text-align: left;
      white-space: nowrap;
      #color(color, --primary-text-color);
      i {
        font-size: 14px;
        padding: 2px;
        border-radius: 2px;
        transition: all 0.2s ease;
        cursor: pointer;
      }
      i:hover {
        color: #ffffff;
        #color(background-color, --primary-blue-color);
      }
    }
    .isWarning {
      #color(color, --primary-yellow-color);
      /deep/.el-input > .el-input__inner {
        #color(background-color, --primary-yellow-color);
      }
    }
    .isError {
      #color(color, --primary-red-color);
      /deep/.el-input > .el-input__inner {
        #color(background-color, --primary-red-color);
      }
    }
    .isSuccess {
      #color(color, --primary-green-color);
      /deep/.el-input > .el-input__inner {
        #color(background-color, --primary-green-color);
      }
    }
    .operation-container {
      flex: 1;
      /deep/.el-input {
        width: 100%;
        min-width: 120px;
      }
      /deep/.el-select {
        width: 100%;
        min-width: 120px;
      }
    }
    .range-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        margin: 0 10px;
      }
    }
    .multi-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-select {
        margin-right: 10px;
      }
      .el-select:last-child {
        margin-right: 0;
      }
    }
    .unit {
      h4 {
        min-width: 30px;
        margin-right: 0;
        margin-left: 5px;
      }
    }
  }
}
</style>
